<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>es6语法 | 上课讲义</title>
    <meta name="description" content="A VitePress site">
    <link rel="stylesheet" href="/tingweipeng/assets/style.f3d4564a.css">
    <link rel="modulepreload" href="/tingweipeng/assets/app.bfa3a24a.js">
    <link rel="modulepreload" href="/tingweipeng/assets/js进阶_index.md.c6d77850.lean.js">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f44a984a><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f44a984a data-v-a50780ff><div class="VPNavBar has-sidebar" data-v-a50780ff data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle has-sidebar" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/tingweipeng/" data-v-d5925166><!--[--><!--]--><!----><!--[-->上课讲义<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/webapis/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->webapis<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tingweipeng/js进阶/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->js进阶<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/ajax/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->ajax<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tingweipeng/vue基础/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->vue基础<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6f1d18b5 data-v-e4361c82 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e4361c82><div class="item appearance" data-v-e4361c82><p class="label" data-v-e4361c82>Appearance</p><div class="appearance-action" data-v-e4361c82><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-e4361c82 data-v-481098f9 data-v-eba7420e><span class="check" data-v-eba7420e><span class="icon" data-v-eba7420e><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-481098f9><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-481098f9><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6f1d18b5 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-f44a984a data-v-b6162a8b><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b6162a8b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b6162a8b><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b6162a8b>Menu</span></button><a class="top-link" href="#" data-v-b6162a8b> Return to top </a></div><aside class="VPSidebar" data-v-f44a984a data-v-a186aa16><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-a186aa16><span class="visually-hidden" id="sidebar-aria-label" data-v-a186aa16> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-a186aa16><section class="VPSidebarGroup" data-v-a186aa16 data-v-6e45c352><div class="title" data-v-6e45c352><h2 class="title-text" data-v-6e45c352>js进阶</h2><div class="action" data-v-6e45c352><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-6e45c352><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-6e45c352><!--[--><!--[--><a class="VPLink link link active" href="/tingweipeng/js进阶/" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>01-es6语法</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/js%E8%BF%9B%E9%98%B6/day02.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>02-es6语法</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/js%E8%BF%9B%E9%98%B6/day03.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>03-面向对象</span><!--]--><!----></a><!----><!--]--><!--[--><a class="VPLink link link" href="/tingweipeng/js%E8%BF%9B%E9%98%B6/day04.html" style="padding-left:0px;" data-v-36b976d1 data-v-3c355974><!--[--><span class="link-text" data-v-36b976d1>04-js进阶</span><!--]--><!----></a><!----><!--]--><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f44a984a data-v-d981fe29><div class="VPDoc has-sidebar has-aside" data-v-d981fe29 data-v-cfb513e0><div class="container" data-v-cfb513e0><div class="aside" data-v-cfb513e0><div class="aside-curtain" data-v-cfb513e0></div><div class="aside-container" data-v-cfb513e0><div class="aside-content" data-v-cfb513e0><div class="VPDocAside" data-v-cfb513e0 data-v-afc4c1a1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-afc4c1a1 data-v-2865c0b0><div class="content" data-v-2865c0b0><div class="outline-marker" data-v-2865c0b0></div><div class="outline-title" data-v-2865c0b0>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-2865c0b0><span class="visually-hidden" id="doc-outline-aria-label" data-v-2865c0b0> Table of Contents for current page </span><ul class="root" data-v-2865c0b0 data-v-1188541a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-afc4c1a1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-cfb513e0><div class="content-container" data-v-cfb513e0><!--[--><!--]--><main class="main" data-v-cfb513e0><div style="position:relative;" class="vp-doc _tingweipeng_js%E8%BF%9B%E9%98%B6_index" data-v-cfb513e0><div><h1 id="es6语法" tabindex="-1">es6语法 <a class="header-anchor" href="#es6语法" aria-hidden="true">#</a></h1><h2 id="学习目标" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标" aria-hidden="true">#</a></h2><ul><li>能够说出作用域链是什么</li><li>能够了解什么是垃圾回收机制</li><li>能够说出什么是闭包以及作用</li><li>能够写出箭头函数常见的写法</li><li>能够完成数组解构</li><li>能够完成对象解构</li><li>能够完成今日综合商品筛选案例</li></ul><h2 id="作用域-概念介绍" tabindex="-1">作用域-概念介绍 <a class="header-anchor" href="#作用域-概念介绍" aria-hidden="true">#</a></h2><h3 id="目标" tabindex="-1">目标 <a class="header-anchor" href="#目标" aria-hidden="true">#</a></h3><p>能够说出作用域的概念</p><h3 id="什么是作用域" tabindex="-1">什么是作用域？ <a class="header-anchor" href="#什么是作用域" aria-hidden="true">#</a></h3><p>作用域<code>scope</code>规定了变量能够被访问的「范围」，离开了这个「范围」变量便不能被访问。</p><p>大白话：变量在什么地方可以使用，什么地方不可以使用</p><h3 id="作用域的分类" tabindex="-1">作用域的分类 <a class="header-anchor" href="#作用域的分类" aria-hidden="true">#</a></h3><p>作用域分为全局作用域和局部作用域。</p><h3 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-hidden="true">#</a></h3><ol><li>什么是作用域？<details><summary>答案</summary><ul><li> 变量能够被访问的「范围」</li></ul></details></li></ol><h2 id="局部作用域-函数作用域" tabindex="-1">局部作用域-函数作用域 <a class="header-anchor" href="#局部作用域-函数作用域" aria-hidden="true">#</a></h2><h3 id="目标-1" tabindex="-1">目标 <a class="header-anchor" href="#目标-1" aria-hidden="true">#</a></h3><ul><li>能够说出局部作用域的分类</li><li>能够说出局部作用域内变量的访问范围</li></ul><h3 id="问题导入" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入" aria-hidden="true">#</a></h3><p>请看看说说下面的代码输出的结果？为什么呢？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">num</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">() </span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(num)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>函数里面的变量不能在函数外面访问</p><p>局部作用域：只在某个区域内有效</p><h3 id="局部作用域分类" tabindex="-1">局部作用域分类 <a class="header-anchor" href="#局部作用域分类" aria-hidden="true">#</a></h3><p>分为函数作用域和块级作用域</p><h4 id="什么是函数作用域" tabindex="-1">什么是函数作用域 <a class="header-anchor" href="#什么是函数作用域" aria-hidden="true">#</a></h4><p>函数内部就是函数作用域，函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。在函数内部声明的变量或者函数只能在函数内部被访问，外部无法直接访问。</p><div class="tip custom-block"><p class="custom-block-title">总结</p><ul><li>函数内部声明的变量，在函数外部无法被访问</li><li>函数的参数也是函数内部的局部变量</li><li>不同函数内部声明的变量无法互相访问</li><li>函数执行完毕后，函数内部的变量被清空了</li></ul></div><h3 id="小结-1" tabindex="-1">小结 <a class="header-anchor" href="#小结-1" aria-hidden="true">#</a></h3><ol><li><p>局部作用域分为哪两种？</p><details><summary>答案</summary><ul><li> 函数作用域 函数内部 </li><li> 块级作用域 {} </li></ul></details></li><li><p>函数作用域内声明的变量外部能使用吗？</p><details><summary>答案</summary><ul><li> 不能 </li></ul></details></li></ol><h2 id="局部作用域-块级作用域" tabindex="-1">局部作用域-块级作用域 <a class="header-anchor" href="#局部作用域-块级作用域" aria-hidden="true">#</a></h2><h3 id="目标-2" tabindex="-1">目标 <a class="header-anchor" href="#目标-2" aria-hidden="true">#</a></h3><p>能够说出块级作用域里面的变量的访问范围</p><h3 id="问题导入-1" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-1" aria-hidden="true">#</a></h3><p>请看看说说下面的代码输出的结果？为什么呢？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>在<code>{ }</code> 外面无法访问 <code>{ }</code>里面通过<code>let</code>关键字定义的变量</p><h3 id="什么是块级作用域" tabindex="-1">什么是块级作用域 <a class="header-anchor" href="#什么是块级作用域" aria-hidden="true">#</a></h3><p><strong>块级作用域</strong>：就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至单独的一个<code>{ }</code>都可以被看作是一个块级作用域。</p><p>在 JavaScript 中使用 <code>{ }</code> 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (</span><span style="color:#79C0FF;">true</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#FF7B72;">for</span><span style="color:#C9D1D9;"> (</span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> i </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">; i </span><span style="color:#FF7B72;">&lt;=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">;i</span><span style="color:#FF7B72;">++</span><span style="color:#C9D1D9;">){</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 变量 i 只能在该代码块里面访问</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(i)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(i) </span><span style="color:#8B949E;">// 报错</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">总结</p><ul><li>let 声明的变量会产生块作用域，var 不会产生块作用域</li><li>const 声明的常量也会产生块作用域</li><li>不同代码块之间的变量无法互相访问</li><li>推荐使用 let 或 const</li></ul></div><h3 id="小结-2" tabindex="-1">小结 <a class="header-anchor" href="#小结-2" aria-hidden="true">#</a></h3><ol><li><p>块级作用域里面的变量的访问范围？</p><details><summary>答案</summary><ul><li> 在大括号内通过let与const 声明的变量只能在大括号里面被访问 </li></ul></details></li></ol><h2 id="全局作用域" tabindex="-1">全局作用域 <a class="header-anchor" href="#全局作用域" aria-hidden="true">#</a></h2><h3 id="目标-3" tabindex="-1">目标 <a class="header-anchor" href="#目标-3" aria-hidden="true">#</a></h3><p>能够说出全局作用域中变量的访问范围</p><h3 id="问题导入-2" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-2" aria-hidden="true">#</a></h3><p>请看看说说下面的代码输出的结果？</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">	</span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>在函数里面可以访问函数外面定义的变量</p><h3 id="什么是全局作用域" tabindex="-1">什么是全局作用域？ <a class="header-anchor" href="#什么是全局作用域" aria-hidden="true">#</a></h3><p><code>&lt;script&gt;</code> 标签 和 <code>.js</code>文件 的【最外层】就是所谓的全局作用域，在全局作用域中声明的变量，任何其它作用域都可以被访问。</p><p>在全局作用域内声明的变量称之为「全局变量」</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 全局作用域</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 在全局作用域处声明了 num 变量</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">num</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 函数作用域</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 此处全局作用域</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">注意</p><ul><li><p>函数中未使用任何关键字声明的变量为全局变量，不推荐！！！</p></li><li><p>尽可能少的声明全局变量，防止全局变量被污染</p></li></ul></div><h3 id="小结-3" tabindex="-1">小结 <a class="header-anchor" href="#小结-3" aria-hidden="true">#</a></h3><ol><li>全局作用域中声明的变量的访问范围？ <details><summary>答案</summary><ul><li> 全局作用域中声明的变量，任何其它作用域都可以被访问 </li></ul></details></li></ol><h2 id="作用域链" tabindex="-1">作用域链 <a class="header-anchor" href="#作用域链" aria-hidden="true">#</a></h2><h3 id="目标-4" tabindex="-1">目标 <a class="header-anchor" href="#目标-4" aria-hidden="true">#</a></h3><p>能够说出什么是作用域链？</p><h3 id="问题导入-3" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-3" aria-hidden="true">#</a></h3><p>问：下面代码有错误吗？如果没有错误结果是多少？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 全局作用域</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> b </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">2</span></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// 局部作用域</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">g</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">2</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">g</span><span style="color:#C9D1D9;">() </span><span style="color:#8B949E;">// 调用g函数</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() </span><span style="color:#8B949E;">// 调用f函数</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>结果为：</p><div class="language-text line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki"><code><span class="line"><span style="color:#c9d1d9;">2</span></span>
<span class="line"><span style="color:#c9d1d9;"></span></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="什么是作用域链" tabindex="-1">什么是作用域链？ <a class="header-anchor" href="#什么是作用域链" aria-hidden="true">#</a></h3><p>作用域链：嵌套关系的作用域串联起来形成了作用域链，作用域链本质上是底层的变量查找机制（就近原则、从内到外）</p><p>大白话：里面的函数能够看见外面的变量，外面看不见里面的变量</p><div class="tip custom-block"><p class="custom-block-title">总结</p><ul><li>在函数被执行时，会优先查找当前函数作用域中查找变量</li><li>如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域</li></ul></div><h3 id="小结-4" tabindex="-1">小结 <a class="header-anchor" href="#小结-4" aria-hidden="true">#</a></h3><ol><li><p>作用域链本质是什么？</p><details><summary>答案</summary><ul><li> 底层的变量查找机制 </li></ul></details></li><li><p>作用域链查找的规则是什么？</p><details><summary>答案</summary><ul><li> 会优先查找当前函数作用域中查找变量查找不到则会依次逐级查找父级作用域直到全局作用域 </li></ul></details></li></ol><h2 id="垃圾回收机制-概念介绍" tabindex="-1">垃圾回收机制-概念介绍 <a class="header-anchor" href="#垃圾回收机制-概念介绍" aria-hidden="true">#</a></h2><h3 id="目标-5" tabindex="-1">目标 <a class="header-anchor" href="#目标-5" aria-hidden="true">#</a></h3><p>能够说出什么是<code>垃圾回收机制</code></p><h3 id="什么是垃圾回收机制" tabindex="-1">什么是垃圾回收机制？ <a class="header-anchor" href="#什么是垃圾回收机制" aria-hidden="true">#</a></h3><p>垃圾回收机制(Garbage Collection) 简称 GC机制</p><p>核心思想：如何判断内存是否已经不再被使用, 如果是就视为垃圾释放掉</p><p>不再用到的内存，没有及时释放，就叫做内存泄漏</p><p>垃圾回收常见算法: 引用计数法 和 标记清除法</p><h3 id="内存的生命周期" tabindex="-1">内存的生命周期 <a class="header-anchor" href="#内存的生命周期" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 为变量分配内存</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">i</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">11</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">str</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;pink老师&#39;</span></span>
<span class="line"><span style="color:#8B949E;">// 为对象分配内存</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">person</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    age: </span><span style="color:#79C0FF;">18</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    uname: </span><span style="color:#A5D6FF;">&#39;pink老师&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#8B949E;">// 为函数分配内存</span></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;">,</span><span style="color:#FFA657;">b</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> b</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>JS环境中分配的内存, 一般有如下生命周期：</p><ol><li>内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存</li><li>内存使用：即读写内存，也就是使用变量、函数等</li><li>内存回收：使用完毕，由垃圾回收自动回收不再使用的内存</li><li>说明 <ol><li>全局变量一般不会回收(关闭页面回收)；</li><li>一般情况下局部变量的值, 不用了, 会被自动回收掉</li></ol></li></ol><p>参考博客：<a href="https://juejin.cn/post/6844903556265279502#heading-7" target="_blank" rel="noreferrer">https://juejin.cn/post/6844903556265279502#heading-7</a></p><h3 id="小结-5" tabindex="-1">小结 <a class="header-anchor" href="#小结-5" aria-hidden="true">#</a></h3><ol><li>垃圾回收机制的核心思想？ <details><summary>答案</summary><ul><li> 如何判断内存是否已经不再被使用, 如果是就视为垃圾释放掉 </li></ul></details></li></ol><h2 id="垃圾回收机制-引用计数法" tabindex="-1">垃圾回收机制-引用计数法 <a class="header-anchor" href="#垃圾回收机制-引用计数法" aria-hidden="true">#</a></h2><h3 id="目标-6" tabindex="-1">目标 <a class="header-anchor" href="#目标-6" aria-hidden="true">#</a></h3><p>能够说出垃圾回收机制-引用计数法</p><h3 id="什么是引用计数法" tabindex="-1">什么是引用计数法？ <a class="header-anchor" href="#什么是引用计数法" aria-hidden="true">#</a></h3><p>IE采用的引用计数算法, 定义「内存不再使用」的标准很简单，就是看一个对象是否有指向它的引用。</p><p><strong>算法</strong>：</p><ol><li>跟踪记录每个值被引用的次数。</li><li>如果这个值的被引用了一次，那么就记录次数1</li><li>多次引用会累加。</li><li>如果减少一个引用就减1。</li><li>如果引用次数是0 ，则释放内存。</li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">person</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">  name: </span><span style="color:#A5D6FF;">&#39;pink老师&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  age: </span><span style="color:#79C0FF;">18</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">p</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> person</span></span>
<span class="line"><span style="color:#C9D1D9;">person </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">p </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">null</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="小结-6" tabindex="-1">小结 <a class="header-anchor" href="#小结-6" aria-hidden="true">#</a></h3><ol><li><p>什么是引用计数法？</p><details><summary>答案</summary><ul><li> 跟踪记录每个值被引用的次数 </li><li> 如果这个值的被引用了一次，那么就记录次数1 </li><li> 多次引用会累加 </li><li> 如果减少一个引用就减1 </li><li> 如果引用次数是0 ，则释放内存 </li></ul></details></li></ol><h2 id="垃圾回收机制-标记清除法" tabindex="-1">垃圾回收机制-标记清除法 <a class="header-anchor" href="#垃圾回收机制-标记清除法" aria-hidden="true">#</a></h2><h3 id="目标-7" tabindex="-1">目标 <a class="header-anchor" href="#目标-7" aria-hidden="true">#</a></h3><p>能够说出垃圾回收机制-标记清除法</p><h3 id="引用计数法的问题" tabindex="-1">引用计数法的问题？ <a class="header-anchor" href="#引用计数法的问题" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> o1 </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {}</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> o2 </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {}</span></span>
<span class="line"><span style="color:#C9D1D9;">  o1.a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> o2</span></span>
<span class="line"><span style="color:#C9D1D9;">  o2.a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> o1</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;引用计数无法回收&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p>引用计数法：会出现循环引用的问题，因为他们的引用次数永远不会是0。这样的相互引用如果说很大量的存在就会导致大量的内存泄露</p></blockquote><h3 id="什么是标记清除法" tabindex="-1">什么是标记清除法 <a class="header-anchor" href="#什么是标记清除法" aria-hidden="true">#</a></h3><p>当变量进入执行环境时，就标记这个变量“进入环境”，被标记为“进入环境”的变量是不能被回收的，因为他们正在被使用。当变量离开环境时，就会被标记为“离开环境”，被标记为“离开环境”的变量会被内存释放。</p><p>标记清除算法分为两步：</p><p>第一步：标记。</p><p>第二步：清除。</p><h3 id="示例代码" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">test</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;"> </span><span style="color:#8B949E;">// 标记 进入环境</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">test</span><span style="color:#C9D1D9;">() </span><span style="color:#8B949E;">// 函数执行完成 标记离开环境</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="小结-7" tabindex="-1">小结 <a class="header-anchor" href="#小结-7" aria-hidden="true">#</a></h3><ol><li><p>什么是标记清除法？</p><details><summary>答案</summary><ul><li> 当变量进入执行环境时，就标记这个变量“进入环境”，被标记为“进入环境”的变量是不能被回收的，因为他们正在被使用。当变量离开环境时，就会被标记为“离开环境”，被标记为“离开环境”的变量会被内存释放。 </li></ul></details></li></ol><h2 id="闭包" tabindex="-1">闭包 <a class="header-anchor" href="#闭包" aria-hidden="true">#</a></h2><h3 id="目标-8" tabindex="-1">目标 <a class="header-anchor" href="#目标-8" aria-hidden="true">#</a></h3><p>能说出什么是闭包，闭包的作用</p><h3 id="问题引入" tabindex="-1">问题引入 <a class="header-anchor" href="#问题引入" aria-hidden="true">#</a></h3><p>观察下面代码看看会出什么现象？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">outer</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">outer</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>现象：</p><ol><li>函数嵌套，一个函数里面嵌套一个函数</li><li>里面的函数在访问外层函数定义的变量</li></ol><p>上面的这种写法：闭包</p><h3 id="什么是闭包" tabindex="-1">什么是闭包 <a class="header-anchor" href="#什么是闭包" aria-hidden="true">#</a></h3><p>概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域</p><p>简单理解：闭包 = 函数嵌套 + 里层函数访问外层函数的变量</p><p>断点调试查看闭包</p><p><img src="/tingweipeng/assets/image-20221220110825616.08d18f4d.png" alt="image-20221220110825616" data-fancybox="gallery"></p><h3 id="闭包的作用" tabindex="-1">闭包的作用 <a class="header-anchor" href="#闭包的作用" aria-hidden="true">#</a></h3><p>可以在函数外面访问函数内部定义的变量</p><h3 id="基本语法" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">outer</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> f</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fun</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">outer</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#D2A8FF;">fun</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">outer</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">fun</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">outer</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#D2A8FF;">fun</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="小结-8" tabindex="-1">小结 <a class="header-anchor" href="#小结-8" aria-hidden="true">#</a></h3><ol><li><p>闭包的简单理解？</p><details><summary>答案</summary><ul><li> 闭包 = 函数嵌套 + 里层函数访问外层函数的变量 </li></ul></details></li><li><p>闭包的作用？</p><details><summary>答案</summary><ul><li> 可以在函数外面访问函数内部定义的变量 </li></ul></details></li></ol><h2 id="闭包-应用场景" tabindex="-1">闭包-应用场景 <a class="header-anchor" href="#闭包-应用场景" aria-hidden="true">#</a></h2><h3 id="目标-9" tabindex="-1">目标 <a class="header-anchor" href="#目标-9" aria-hidden="true">#</a></h3><p>能够说出闭包的应用场景</p><h3 id="闭包应用" tabindex="-1">闭包应用 <a class="header-anchor" href="#闭包应用" aria-hidden="true">#</a></h3><p>实现数据的私有化</p><p>比如，我们要做个统计函数调用次数，函数调用一次，就++</p><p>传统的做法</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> count </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  count</span><span style="color:#FF7B72;">++</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`函数被调用${</span><span style="color:#C9D1D9;">count</span><span style="color:#A5D6FF;">}次`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>但是，这个count 是个全局变量，很容易被修改</p><p>可以使用闭包来让数据私有化</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> count </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fun</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    count++</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.log(</span><span style="color:#A5D6FF;">`函数被调用${</span><span style="color:#C9D1D9;">count</span><span style="color:#A5D6FF;">}次`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">const res = fn()</span></span>
<span class="line"><span style="color:#C9D1D9;">res()</span></span>
<span class="line"><span style="color:#C9D1D9;">res()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>这样实现了数据私有，无法直接修改count</p><h3 id="小结-9" tabindex="-1">小结 <a class="header-anchor" href="#小结-9" aria-hidden="true">#</a></h3><ol><li><p>闭包的应用场景？</p><details><summary>答案</summary><ul><li> 实现数据的私有化 </li></ul></details></li></ol><h2 id="变量提升" tabindex="-1">变量提升 <a class="header-anchor" href="#变量提升" aria-hidden="true">#</a></h2><h3 id="目标-10" tabindex="-1">目标 <a class="header-anchor" href="#目标-10" aria-hidden="true">#</a></h3><p>了解什么是变量提升</p><h3 id="问题导入-4" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-4" aria-hidden="true">#</a></h3><p>请问下面的代码输出的结果是什么？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 访问变量</span></span>
<span class="line"><span style="color:#C9D1D9;">consle.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(str)</span></span>
<span class="line"><span style="color:#8B949E;">// 变量初始化</span></span>
<span class="line"><span style="color:#FF7B72;">var</span><span style="color:#C9D1D9;"> str </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">&#39;hello&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="什么是变量提升" tabindex="-1">什么是变量提升？ <a class="header-anchor" href="#什么是变量提升" aria-hidden="true">#</a></h3><p>变量提升是 JavaScript 中比较「奇怪」的现象，它允许在变量声明之前即被访问（仅存在于var声明变量）</p><p>变量提升：将变量的声明提升到当前作用域的最前面 + 变量赋值</p><p>总结：</p><ol><li>变量在var声明之前即被访问，变量的值为 undefined</li><li>let/const声明的变量不存在变量提升</li><li>实际开发中推荐先声明再访问变量</li></ol><div class="tip custom-block"><p class="custom-block-title">说明</p><p>JS初学者经常花很多时间才能习惯变量提升，还经常出现一些意想不到的bug，正因为如此，ES6 引入了块级作用域，用let 或者 const声明变量，让代码写法更加规范和人性化。</p></div><h3 id="小结-10" tabindex="-1">小结 <a class="header-anchor" href="#小结-10" aria-hidden="true">#</a></h3><ol><li><p>用哪个关键字声明变量会有变量提升？</p><details><summary>答案</summary><ul><li> var </li></ul></details></li><li><p>变量提升是什么流程？</p><details><summary>答案</summary><ul><li> 先把var变量提升到当前作用域于最前面 </li><li> 只提升变量声明， 不提升变量赋值 </li><li> 然后依次执行代码 </li></ul></details></li></ol><h2 id="函数提升" tabindex="-1">函数提升 <a class="header-anchor" href="#函数提升" aria-hidden="true">#</a></h2><h3 id="目标-11" tabindex="-1">目标 <a class="header-anchor" href="#目标-11" aria-hidden="true">#</a></h3><p>能说出函数提升的过程</p><h3 id="问题导入-5" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-5" aria-hidden="true">#</a></h3><p>请问下面的代码输出的结果是什么？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="什么是函数提升" tabindex="-1">什么是函数提升 <a class="header-anchor" href="#什么是函数提升" aria-hidden="true">#</a></h3><p>函数提升与变量提升比较类似，是指函数在声明之前即可被调用</p><p><strong>函数提升</strong>：是将函数的声明提升到当前作用域的最前面</p><h3 id="示例代码-1" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-1" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 调用函数</span></span>
<span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#8B949E;">// 声明函数</span></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;声明之前函数被调用&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#FF7B72;">var</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">bar</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(){</span></span>
<span class="line"><span style="color:#C9D1D9;">   console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;函数表达式不存在提升的现象&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">总结</p><ol><li>函数提升能够使函数的声明调用更灵活</li><li>函数表达式不存在提升的现象</li><li>实际开发中推荐定义函数在调用函数</li></ol></div><h3 id="小结-11" tabindex="-1">小结 <a class="header-anchor" href="#小结-11" aria-hidden="true">#</a></h3><ol><li>函数表达式是否有函数提升？ <details><summary>答案</summary><ul><li> 不能 </li></ul></details></li></ol><h2 id="函数参数-动态参数" tabindex="-1">函数参数-动态参数 <a class="header-anchor" href="#函数参数-动态参数" aria-hidden="true">#</a></h2><h3 id="目标-12" tabindex="-1">目标 <a class="header-anchor" href="#目标-12" aria-hidden="true">#</a></h3><p>能够使用函数里面的<code>arguments</code>获取实参</p><h3 id="问题导入-6" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-6" aria-hidden="true">#</a></h3><p>需求：写一个求和函数，不管用户传入几个实参，都要把和求出来</p><p>如下：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>形参应该怎么写呢？</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">???</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>可以使用 函数参数-动态参数 解决上面的问题</p><p><strong>动态参数：</strong><code>arguments</code>是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参</p><p>判断是否是数组：<code>Array.isArray(数组)</code> true 表示就是数组 、false 表示就不是数组</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 动态参数：调用函数时 可能传递的参数的个数 没有限制 无法确定 形参的个数 </span></span>
<span class="line"><span style="color:#8B949E;">// 使用动态参数 arguments 可以获取到所有的实际参数 </span></span>
<span class="line"></span>
<span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// console.log(arguments)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> sum </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">for</span><span style="color:#C9D1D9;"> (</span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> i </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">; i </span><span style="color:#FF7B72;">&lt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arguments</span><span style="color:#C9D1D9;">.</span><span style="color:#79C0FF;">length</span><span style="color:#C9D1D9;">; i</span><span style="color:#FF7B72;">++</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    sum </span><span style="color:#FF7B72;">+=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arguments</span><span style="color:#C9D1D9;">[i]</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(sum)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">总结</p><ol><li>arguments 是一个伪数组，只存在于函数中</li><li>arguments 的作用是动态获取函数的实参</li><li>可以通过for循环依次得到传递过来的实参</li></ol></div><h3 id="小结-12" tabindex="-1">小结 <a class="header-anchor" href="#小结-12" aria-hidden="true">#</a></h3><ol><li><p>当不确定传递多少个实参的时候，我们怎么办？</p><details><summary>答案</summary><ul><li> arguments 动态参数 </li></ul></details></li><li><p>arguments是真数组还是伪数组？</p><details><summary>答案</summary><ul><li> 伪数组 </li></ul></details></li><li><p>如何检测获取的是真伪数组？</p><details><summary>答案</summary><ul><li>Array.isArray()方法</li></ul></details></li></ol><h2 id="函数参数-剩余参数" tabindex="-1">函数参数-剩余参数 <a class="header-anchor" href="#函数参数-剩余参数" aria-hidden="true">#</a></h2><h3 id="目标-13" tabindex="-1">目标 <a class="header-anchor" href="#目标-13" aria-hidden="true">#</a></h3><p>能够使用函数参数-<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters" target="_blank" rel="noreferrer">剩余参数</a>获取多余实际参数</p><h3 id="问题导入-7" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-7" aria-hidden="true">#</a></h3><p>如果函数的实参比形参多，如何获取多余的实参呢？</p><p>比如：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;">,</span><span style="color:#FFA657;">b</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">30</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">40</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>可以使用 剩余参数 解决上面的问题</p><p><strong>剩余参数</strong>：允许我们将一个不定数量的参数表示为一个数组。</p><p><strong>大白话</strong>：剩余参数可以获取剩余的实参，得到的是一个数组</p><h3 id="基本语法-1" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-1" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">函数名</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;">,</span><span style="color:#FFA657;">b</span><span style="color:#C9D1D9;">,</span><span style="color:#FF7B72;">...</span><span style="color:#FFA657;">变量名</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(变量名)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">注意</p><ul><li><code>...</code> 是剩余语法符号，放置于形参列表的最后面，用于获取多余的实参</li><li>剩余参数获取的是真数组，动态参数获取的伪数组</li></ul></div><h3 id="小结-13" tabindex="-1">小结 <a class="header-anchor" href="#小结-13" aria-hidden="true">#</a></h3><ol><li><p>剩余参数主要的使用场景是？</p><details><summary>答案</summary><ul><li>获取多余的实参</li></ul></details></li><li><p>剩余参数的语法是什么？</p><details><summary>答案</summary><ul><li>...变量名</li></ul></details></li><li><p>剩余参数获取的是真数组还是伪数组吗？</p><details><summary>答案</summary><ul><li>真数组</li></ul></details></li></ol><h3 id="课堂练习-学员自己练习" tabindex="-1">课堂练习（学员自己练习） <a class="header-anchor" href="#课堂练习-学员自己练习" aria-hidden="true">#</a></h3><p>需求：借助于剩余参数来实现求和函数，不管用户传入几个实参，都要把和求出来</p><h2 id="展开运算符" tabindex="-1">展开运算符 <a class="header-anchor" href="#展开运算符" aria-hidden="true">#</a></h2><h3 id="目标-14" tabindex="-1">目标 <a class="header-anchor" href="#目标-14" aria-hidden="true">#</a></h3><p>能够使用展开运算符求数组最大值(最小值)、合并数组等</p><h3 id="问题导入-8" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-8" aria-hidden="true">#</a></h3><p>如何快速求数组的最大值和最小值？</p><p>可以遍历数组，依次比较。</p><p>有没有其他方法？可以是用展开运算符</p><p>什么是展开运算符：展开运算符<code>...</code>将一个数组展开</p><h3 id="基本语法-2" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-2" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">4</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">5</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">...</span><span style="color:#C9D1D9;">arr)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>典型运用场景： 求数组最大值(最小值)、合并数组</p><p>使用展开运算符求数组最大值(最小值)</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr1</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">30</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">40</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">50</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr2</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">50</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">60</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">70</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">max</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> Math.</span><span style="color:#D2A8FF;">max</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">...</span><span style="color:#C9D1D9;">arr1)</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">min</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> Math.</span><span style="color:#D2A8FF;">min</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">...</span><span style="color:#C9D1D9;">arr2)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>合并数组</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr1</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">30</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">40</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">50</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr2</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">50</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">60</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">70</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#FF7B72;">...</span><span style="color:#C9D1D9;">arr1, arr2]</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="展开运算符与剩余参数的区别" tabindex="-1">展开运算符与剩余参数的区别 <a class="header-anchor" href="#展开运算符与剩余参数的区别" aria-hidden="true">#</a></h3><ol><li>展开运算符主要是 数组展开</li><li>剩余参数主要是在函数中使用</li><li>展开运算符变量名不能任意，剩余参数变量名可以任意</li></ol><h3 id="小结-14" tabindex="-1">小结 <a class="header-anchor" href="#小结-14" aria-hidden="true">#</a></h3><ol><li><p>展开运算符主要的作用是？</p><details><summary>答案</summary><ul><li> 求数组最大值(最小值)、合并数组合并对象等</li></ul></details></li><li><p>展开运算符的基本语法是？</p><details><summary>答案</summary><ul><li>...数组名</li></ul></details></li></ol><h2 id="箭头函数-语法" tabindex="-1">箭头函数-语法 <a class="header-anchor" href="#箭头函数-语法" aria-hidden="true">#</a></h2><h3 id="目标-15" tabindex="-1">目标 <a class="header-anchor" href="#目标-15" aria-hidden="true">#</a></h3><p>能够写出箭头函数的基本语法</p><h3 id="问题导入-9" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-9" aria-hidden="true">#</a></h3><p>以前我们在学习js基础时，学习几种函数定义的方式？</p><ol><li><p>通过 function 关键字 定义函数</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">函数名</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">函数名</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li><li><p>函数表达式</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">变量名</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ol><p>有没更加简单的方式来定义方式呢？</p><p>可以使用箭头函数</p><h3 id="箭头函数" tabindex="-1">箭头函数 <a class="header-anchor" href="#箭头函数" aria-hidden="true">#</a></h3><p>任何可以使用函数表达式(匿名函数)的地方，都可以使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions" target="_blank" rel="noreferrer">箭头函数</a>来代替</p><p>作用：可以让函数表达式(匿名函数)写法变得更加简洁</p><p>语法1：将 function 关键字 省略 ， () 与 {} 之间使用 =&gt;</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 函数表达式</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#8B949E;">// 箭头函数</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">   console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>语法2：只有一个形参 小括号 可以省略</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 函数表达式</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#8B949E;">// 箭头函数</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">   console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>语法3：函数体 里面 只有一行代码 大括号可以省略</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 函数表达式</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#8B949E;">// 箭头函数</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;hello&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>语法4：函数体 里面 只有一行代码 是将结果 return ，return 关键字可以省略</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 函数表达式</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">msg</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> msg</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#8B949E;">// 箭头函数</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FFA657;">msg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> msg</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>语法5：函数体如果需要返回对象 需要给对象加括号</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 函数表达式</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> {uname: </span><span style="color:#A5D6FF;">&#39;pink老师&#39;</span><span style="color:#C9D1D9;">,age: </span><span style="color:#79C0FF;">18</span><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#8B949E;">// 箭头函数</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> ({uname: </span><span style="color:#A5D6FF;">&#39;pink老师&#39;</span><span style="color:#C9D1D9;">,age: </span><span style="color:#79C0FF;">18</span><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">总结</p><ol><li>任何可以使用函数表达式的地方，都可以使用箭头函数</li><li>箭头函数属于表达式函数，因此不存在函数提升</li><li>箭头函数只有一个参数时可以省略小括号 ()</li><li>箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回</li><li>加括号的函数体返回对象字面量表达式</li></ol></div><h3 id="小结-15" tabindex="-1">小结 <a class="header-anchor" href="#小结-15" aria-hidden="true">#</a></h3><ol><li><p>箭头函数哪种情况可以省略小括号？</p><details><summary>答案</summary><ul><li>只有一个形参可以省略小括号 </li></ul></details></li><li><p>使用function 关键字声明的函数可以转换为箭头函数吗？</p><details><summary>答案</summary><ul><li>不可以</li></ul></details></li><li><p>箭头函数的函数体中如果只有一行代码，是否可以省略大括号吗？</p><details><summary>答案</summary><ul><li>可以</li></ul></details></li><li><p>箭头函数的函数体只有一行代码，这行代码是一个对象，需要返回，应该如何书写？</p><details><summary>答案</summary><ul><li>需要给这个对象加上一个小括号，可以省略return关键字</li></ul></details></li></ol><h2 id="箭头函数-运用" tabindex="-1">箭头函数-运用 <a class="header-anchor" href="#箭头函数-运用" aria-hidden="true">#</a></h2><h3 id="目标-16" tabindex="-1">目标 <a class="header-anchor" href="#目标-16" aria-hidden="true">#</a></h3><p>能够熟练使用箭头函数</p><h3 id="需求" tabindex="-1">需求 <a class="header-anchor" href="#需求" aria-hidden="true">#</a></h3><p>使用箭头函数求2个数的和</p><h3 id="示例代码-2" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-2" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">num1</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">num2</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> num1 </span><span style="color:#FF7B72;">+</span><span style="color:#C9D1D9;"> num2</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">res</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getSum</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">30</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;"> console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(res)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="箭头函数-参数" tabindex="-1">箭头函数-参数 <a class="header-anchor" href="#箭头函数-参数" aria-hidden="true">#</a></h2><h3 id="目标-17" tabindex="-1">目标 <a class="header-anchor" href="#目标-17" aria-hidden="true">#</a></h3><p>能够使用剩余参数接收箭头函数不确定的实际参数</p><h3 id="问题导入-10" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-10" aria-hidden="true">#</a></h3><p>普通函数有arguments 动态参数？那么箭头函数中是否有 arguments 动态参数呢？</p><p>箭头函数没有 arguments 动态参数，但是有 剩余参数</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 箭头函数里面没有动态参数但是还有剩余参数</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> (</span><span style="color:#FF7B72;">...</span><span style="color:#FFA657;">args</span><span style="color:#C9D1D9;">) </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// console.log(arguments)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#8B949E;">// console.log(args)</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> sum </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">for</span><span style="color:#C9D1D9;"> (</span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> i </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">; i </span><span style="color:#FF7B72;">&lt;</span><span style="color:#C9D1D9;"> args.</span><span style="color:#79C0FF;">length</span><span style="color:#C9D1D9;">;i</span><span style="color:#FF7B72;">++</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    sum </span><span style="color:#FF7B72;">+=</span><span style="color:#C9D1D9;"> args[i]</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(sum)</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">f</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">30</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="小结-16" tabindex="-1">小结 <a class="header-anchor" href="#小结-16" aria-hidden="true">#</a></h3><ol><li><p>箭头函数里面有arguments动态参数吗？</p><details><summary>答案</summary><ul><li> 没有arguments动态参数 </li></ul></details></li><li><p>可以使用什么参数接收多余的实参？</p><details><summary>答案</summary><ul><li> 可以使用剩余参数 </li></ul></details></li></ol><h2 id="箭头函数-this" tabindex="-1"><strong>箭头函数-this</strong> <a class="header-anchor" href="#箭头函数-this" aria-hidden="true">#</a></h2><h3 id="目标-18" tabindex="-1">目标 <a class="header-anchor" href="#目标-18" aria-hidden="true">#</a></h3><p>能够说出箭头函数里面的<code>this</code>指向</p><h3 id="箭头函数里面的this指向" tabindex="-1">箭头函数里面的this指向 <a class="header-anchor" href="#箭头函数里面的this指向" aria-hidden="true">#</a></h3><p>在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值， 非常令人讨厌。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// window</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">sayHi</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 普通函数里面this指向函数的调用者 此处为window</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#D2A8FF;">sayHi</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">btnDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">,</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(){</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 当前this指向 btn</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// window</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">sayHi</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 箭头函数中的this沿用上一层作用域的this</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">btn.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">,() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;">{</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 当前this指向 window</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D2A8FF;">sayHi</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">user</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    name: </span><span style="color:#A5D6FF;">&#39;小明&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 箭头函数中 this 为函数声明环境的 this 一致</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">walk</span><span style="color:#C9D1D9;">: () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 指向 window 不是user</span></span>
<span class="line"><span style="color:#C9D1D9;">    },</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">sleep</span><span style="color:#C9D1D9;">: </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 指向user</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">            console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">) </span><span style="color:#8B949E;">// 指向user </span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 调用箭头函数</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">fn</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">user.</span><span style="color:#D2A8FF;">walk</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"><span style="color:#C9D1D9;">user.</span><span style="color:#D2A8FF;">sleep</span><span style="color:#C9D1D9;">()</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>在开发中【使用箭头函数前需要考虑函数中 <code>this</code> 的值】，事件回调函数使用箭头函数时，<code>this</code> 为全局的 window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn&quot;</span><span style="color:#C9D1D9;">&gt;按钮&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">btnDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.btn&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 普通函数里面的 this 指向dom对象</span></span>
<span class="line"><span style="color:#C9D1D9;">    btnDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(){</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 箭头函数里面的 this 指向 window</span></span>
<span class="line"><span style="color:#C9D1D9;">    btnDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, () </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="小结-17" tabindex="-1">小结 <a class="header-anchor" href="#小结-17" aria-hidden="true">#</a></h3><ol><li><p>箭头函数里面有this吗？</p><details><summary>答案</summary><ul><li> 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this </li></ul></details></li><li><p>DOM事件回调函数推荐使用箭头函数吗？</p><details><summary>答案</summary><ul><li> 不太推荐，特别是需要用到this的时候 </li><li> 事件回调函数使用箭头函数时，this 为全局的 window </li></ul></details></li></ol><h2 id="_2秒以后设置按钮禁用效果" tabindex="-1">2秒以后设置按钮禁用效果 <a class="header-anchor" href="#_2秒以后设置按钮禁用效果" aria-hidden="true">#</a></h2><h3 id="目标-19" tabindex="-1">目标 <a class="header-anchor" href="#目标-19" aria-hidden="true">#</a></h3><p>能够使用箭头函数实现2秒以后设置按钮禁用效果</p><h3 id="需求-1" tabindex="-1">需求 <a class="header-anchor" href="#需求-1" aria-hidden="true">#</a></h3><p>点击按钮后2秒让这个案例设置为禁用效果</p><p><img src="/tingweipeng/assets/2秒后设置为禁用效果.00d95560.gif" alt="" data-fancybox="gallery"></p><h3 id="步骤" tabindex="-1">步骤 <a class="header-anchor" href="#步骤" aria-hidden="true">#</a></h3><ol><li>获取目标元素（事件源）</li><li>注册点击事件（事件类型）</li><li>2秒以后设置为禁用效果（事件处理函数）</li></ol><h3 id="示例代码-3" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-3" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">id</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;btn&quot;</span><span style="color:#C9D1D9;">&gt;按钮&lt;/</span><span style="color:#7EE787;">button</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 事件源：按钮</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 事件类型：点击事件</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 事件处理函数：将按钮设置为禁用效果</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">btnDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;#btn&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    btnDom.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// setTimeout(function(){</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">//   btnDom.disabled = true</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// }, 2000)</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#D2A8FF;">setTimeout</span><span style="color:#C9D1D9;">(() </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(this)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.disabled </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">true</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span><span style="color:#79C0FF;">2000</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h2 id="解构赋值-数组解构" tabindex="-1">解构赋值-数组解构 <a class="header-anchor" href="#解构赋值-数组解构" aria-hidden="true">#</a></h2><h3 id="目标-20" tabindex="-1">目标 <a class="header-anchor" href="#目标-20" aria-hidden="true">#</a></h3><p>能够使用解构赋值对数组里面的元素进行解构</p><h3 id="问题导入-11" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-11" aria-hidden="true">#</a></h3><p>想要获取数组里面的元素的值？</p><p>比如：</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">100</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">200</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">300</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr[</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">b</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr[</span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">c</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr[</span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(b)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(c)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>以上代码书写麻烦，此时可以使用解构赋值的方法让代码更简洁</p><h3 id="什么是数组解构" tabindex="-1">什么是数组解构 <a class="header-anchor" href="#什么是数组解构" aria-hidden="true">#</a></h3><p><strong>数组解构</strong>：将数组的单元值快速批量赋值给一系列变量的简洁语法。</p><h3 id="基本语法-3" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-3" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">变量1</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">变量2</span><span style="color:#C9D1D9;">,...] </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> 数组</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol><li>赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量</li><li>变量的顺序对应数组单元值的位置依次进行赋值操作</li></ol><h3 id="示例代码-4" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-4" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。</span></span>
<span class="line"><span style="color:#8B949E;">// const [变量1,变量2,...] = 数组</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">b</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">c</span><span style="color:#C9D1D9;">] </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#A5D6FF;">&#39;张三&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;李四&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;王五&#39;</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a, b, c)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="小结-18" tabindex="-1">小结 <a class="header-anchor" href="#小结-18" aria-hidden="true">#</a></h3><ol><li><p>数组解构的基本语法是什么？</p><details><summary>答案</summary><ul><li> const [变量1,变量2,...] = 数组</li></ul></details></li></ol><h3 id="数组解构练习" tabindex="-1">数组解构练习 <a class="header-anchor" href="#数组解构练习" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">pc</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#A5D6FF;">&#39;海尔&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;联想&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;小米&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;方正&#39;</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>需求1：请将上面的数组里面的元素解构处理，赋值为这些变量：hr lx mi fz</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">getValue</span><span style="color:#C9D1D9;">() {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">100</span><span style="color:#C9D1D9;">,</span><span style="color:#79C0FF;">60</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>需求2：请将最大值和最小值函数返回值解构 max 和min 两个变量</p><p>要求：max 变量里面保存100，min 变量里面存 60</p><h2 id="数组解构交换两个变量的值" tabindex="-1">数组解构交换两个变量的值 <a class="header-anchor" href="#数组解构交换两个变量的值" aria-hidden="true">#</a></h2><h3 id="目标-21" tabindex="-1">目标 <a class="header-anchor" href="#目标-21" aria-hidden="true">#</a></h3><p>能够使用数组解构来实现交换两个变量的值</p><h3 id="需求-2" tabindex="-1">需求 <a class="header-anchor" href="#需求-2" aria-hidden="true">#</a></h3><p>使用数组解构来实现交换两个变量的值</p><h3 id="步骤-1" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-1" aria-hidden="true">#</a></h3><ol><li>定义两个变量</li><li>使用使用数组解构来实现交换两个变量的值</li></ol><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#8B949E;">// 数组</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> b </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">注意</p><p>最后一个变量的一定需要加分号</p></div><h3 id="示例代码-5" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-5" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 数组</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">10</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> b </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    [b, a] </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [a, b]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a,b)</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="解构赋值-对象解构" tabindex="-1">解构赋值-对象解构 <a class="header-anchor" href="#解构赋值-对象解构" aria-hidden="true">#</a></h2><h3 id="目标-22" tabindex="-1">目标 <a class="header-anchor" href="#目标-22" aria-hidden="true">#</a></h3><p>能够使用对象解构的语法对对象里面的属性进行解构</p><h3 id="问题导入-12" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-12" aria-hidden="true">#</a></h3><p>想要获取对象里面的属性的值？</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">obj</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">    uname: </span><span style="color:#A5D6FF;">&#39;张三&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    age: </span><span style="color:#79C0FF;">18</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    gender: </span><span style="color:#A5D6FF;">&#39;男&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(obj.uname)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(obj.age)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(obj.gender)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>有没有更加简单的方法，可以获取到对象的属性值呢？</p><p>可以使用对象解构</p><h3 id="什么是对象解构" tabindex="-1">什么是对象解构 <a class="header-anchor" href="#什么是对象解构" aria-hidden="true">#</a></h3><p><strong>对象解构</strong>：是将对象属性和方法快速批量赋值给一系列变量的简洁语法</p><h3 id="基本语法-4" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-4" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">uname</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">age</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">gender</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> { uname: </span><span style="color:#A5D6FF;">&#39;张三&#39;</span><span style="color:#C9D1D9;">, age: </span><span style="color:#79C0FF;">18</span><span style="color:#C9D1D9;">, gender: </span><span style="color:#A5D6FF;">&#39;男&#39;</span><span style="color:#C9D1D9;"> }</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">说明</p><ol><li>赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量</li><li>对象属性的值将被赋值给与属性名相同的变量</li><li>注意解构的变量名不要和外面的变量名冲突否则报错</li><li>对象中找不到与变量名一致的属性时变量值为 undefined</li></ol></div><h3 id="将解构的变量名进行重命名" tabindex="-1">将解构的变量名进行重命名 <a class="header-anchor" href="#将解构的变量名进行重命名" aria-hidden="true">#</a></h3><p>语法</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">变量名</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">新的变量名</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> 对象</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="示例代码-6" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-6" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 声明对象</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">obj</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      uname: </span><span style="color:#A5D6FF;">&#39;张三&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      age: </span><span style="color:#79C0FF;">18</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 使用 对象解构的语法 快速的将 对象的属性值 赋值给 变量 </span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#FFA657;">uname</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">a</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">age</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> obj</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(age)</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="小结-19" tabindex="-1">小结 <a class="header-anchor" href="#小结-19" aria-hidden="true">#</a></h3><ol><li><p>如何对对象里面的元素进行解构？</p><details><summary>答案</summary><ul><li> const { 属性名，属性名 } = 对象 </li></ul></details></li><li><p>如何将解构的变量名进行重命名呢？</p><details><summary>答案</summary><ul><li>const { 变量名: 新的变量名 } = 对象</li></ul></details></li></ol><h3 id="对象解构的练习" tabindex="-1">对象解构的练习 <a class="header-anchor" href="#对象解构的练习" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">pig</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {name: </span><span style="color:#A5D6FF;">&#39;佩奇&#39;</span><span style="color:#C9D1D9;">, age: </span><span style="color:#79C0FF;">6</span><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>需求1：从<code>pig</code>对象中解构出<code>name</code>和<code>age</code>属性</p><p>需求2：请将<code>pig</code>对象中的name属性，重名为 uname ，并将其打印输出</p><h2 id="解构赋值-多级对象解构" tabindex="-1">解构赋值-多级对象解构 <a class="header-anchor" href="#解构赋值-多级对象解构" aria-hidden="true">#</a></h2><h3 id="目标-23" tabindex="-1">目标 <a class="header-anchor" href="#目标-23" aria-hidden="true">#</a></h3><p>能够使用解构赋值对对象进行多级解构</p><h3 id="需求-3" tabindex="-1">需求 <a class="header-anchor" href="#需求-3" aria-hidden="true">#</a></h3><p>从下面对象里面 解构出 <code>mother</code> <code>father</code> <code>sister</code></p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">pig</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">  name: </span><span style="color:#A5D6FF;">&#39;佩奇&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">  family: {</span></span>
<span class="line"><span style="color:#C9D1D9;">    mother: </span><span style="color:#A5D6FF;">&#39;猪妈妈&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    father: </span><span style="color:#A5D6FF;">&#39;猪爸爸&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    sister: </span><span style="color:#A5D6FF;">&#39;乔治&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">  },</span></span>
<span class="line"><span style="color:#C9D1D9;">  age: </span><span style="color:#79C0FF;">6</span></span>
<span class="line"><span style="color:#C9D1D9;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>思路：先解构出对象的第一层，然后从第一层里面解构出第二层</p><h3 id="示例代码-7" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-7" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">pig</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      name: </span><span style="color:#A5D6FF;">&#39;佩奇&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      family: {</span></span>
<span class="line"><span style="color:#C9D1D9;">        mother: </span><span style="color:#A5D6FF;">&#39;猪妈妈&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        father: </span><span style="color:#A5D6FF;">&#39;猪爸爸&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        sister: </span><span style="color:#A5D6FF;">&#39;乔治&#39;</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      age: </span><span style="color:#79C0FF;">6</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">, </span><span style="color:#FFA657;">family</span><span style="color:#C9D1D9;">: { </span><span style="color:#79C0FF;">mother</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">father</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">sister</span><span style="color:#C9D1D9;"> } } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> pig</span></span>
<span class="line"><span style="color:#C9D1D9;">    console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(mother, father, sister)</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h2 id="案例-多级对象解构" tabindex="-1">案例-多级对象解构 <a class="header-anchor" href="#案例-多级对象解构" aria-hidden="true">#</a></h2><h3 id="目标-24" tabindex="-1">目标 <a class="header-anchor" href="#目标-24" aria-hidden="true">#</a></h3><p>能够使用解构赋值对对象进行多级解构</p><h3 id="需求-4" tabindex="-1">需求 <a class="header-anchor" href="#需求-4" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 这是后台传递过来的数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">msg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#A5D6FF;">&quot;code&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">200</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#A5D6FF;">&quot;msg&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;获取新闻列表成功&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#A5D6FF;">&quot;data&quot;</span><span style="color:#C9D1D9;">: [</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;5G商用自己，三大运用商收入下降&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;count&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">58</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;国际媒体头条速览&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;count&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">56</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;乌克兰和俄罗斯持续冲突&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;count&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1669</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      ]</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">这里怎么写</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 我们只要 data 数据</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 内部处理</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(msg)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">这里怎么写</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 要求将 获取过来的 data数据 更名为 myData</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 内部处理</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(msg)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br></div></div><p>需求：</p><ol><li>请将以上msg对象 采用对象解构的方式 只选出 data 方面后面使用渲染页面</li><li>上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数</li><li>为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData</li></ol><h3 id="示例代码-8" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-8" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;Document&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 这是后台传递过来的数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">msg</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#A5D6FF;">&quot;code&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">200</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#A5D6FF;">&quot;msg&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;获取新闻列表成功&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#A5D6FF;">&quot;data&quot;</span><span style="color:#C9D1D9;">: [</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;5G商用自己，三大运用商收入下降&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;count&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">58</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;国际媒体头条速览&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;count&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">56</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;id&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;title&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;乌克兰和俄罗斯持续冲突&quot;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#A5D6FF;">&quot;count&quot;</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">1669</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      ]</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// const { data } = msg</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// console.log(data)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// function render({ data }) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   // 我们只要 data 数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   // 内部处理</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   // const { data} = obj</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">//   console.log(data)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// render(msg)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">({ </span><span style="color:#FFA657;">data</span><span style="color:#C9D1D9;">: </span><span style="color:#FFA657;">myData</span><span style="color:#C9D1D9;"> }) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 要求将 获取过来的 data数据 更名为 myData</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 内部处理</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const { data: myData } = obj</span></span>
<span class="line"><span style="color:#C9D1D9;">      console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(myData)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(msg)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br></div></div><p>参考Vue官网：<a href="https://v2.cn.vuejs.org/v2/guide/components-slots.html#%E8%A7%A3%E6%9E%84%E6%8F%92%E6%A7%BD-Prop" target="_blank" rel="noreferrer">https://v2.cn.vuejs.org/v2/guide/components-slots.html#解构插槽-Prop</a></p><h2 id="遍历数组-foreach方法" tabindex="-1">遍历数组：forEach方法 <a class="header-anchor" href="#遍历数组-foreach方法" aria-hidden="true">#</a></h2><h3 id="目标-25" tabindex="-1">目标 <a class="header-anchor" href="#目标-25" aria-hidden="true">#</a></h3><p>能够使用数组的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank" rel="noreferrer">forEach</a>方法对数组的元素进行遍历</p><h3 id="问题导入-13" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-13" aria-hidden="true">#</a></h3><p>之前如何遍历数组？</p><p>使用for循环遍历数组</p><p>现在有更加简单的方法，新增了<code>forEach</code>方法，可以更加简单的遍历数组</p><h3 id="基本语法-5" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-5" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">数组.</span><span style="color:#D2A8FF;">forEach</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">element</span><span style="color:#C9D1D9;">[,</span><span style="color:#FFA657;">index</span><span style="color:#C9D1D9;">]){</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>作用</strong>：forEach() 方法用于遍历数组的每个元素，并将元素传递给回调函数</p><p><strong>主要使用场景</strong>： 遍历数组的每个元素</p><p><strong>参数</strong>：</p><p>callback：针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面二个参数：</p><ul><li><code>element</code> ：当前元素。</li><li><code>index</code> 可选：当前元素的索引。</li></ul><p>当前数组的元素必须写，当前数组的索引号可以不写</p><p><strong>返回值</strong>：<code>undefined</code></p><h3 id="需求遍历数组" tabindex="-1">需求遍历数组 <a class="header-anchor" href="#需求遍历数组" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#A5D6FF;">&#39;pink&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;red&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#A5D6FF;">&#39;green&#39;</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#C9D1D9;">arr.</span><span style="color:#D2A8FF;">forEach</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;">,</span><span style="color:#FFA657;">index</span><span style="color:#C9D1D9;">){</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`当前的数组元素是：${</span><span style="color:#C9D1D9;">item</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">  console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">`当前的数组元素的索引是：${</span><span style="color:#C9D1D9;">index</span><span style="color:#A5D6FF;">}`</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="/tingweipeng/assets/1669256781734-10afbaac-555a-42eb-8fb0-b20d4189a83f.92efbf8f.png" alt="image.png" data-fancybox="gallery"></p><div class="tip custom-block"><p class="custom-block-title">总结</p><ol><li>forEach主要是遍历数组</li><li>参数中当前数组元素是必须要写的， 索引号可选。</li></ol></div><h3 id="小结-20" tabindex="-1">小结 <a class="header-anchor" href="#小结-20" aria-hidden="true">#</a></h3><ol><li><p>forEach方法的作用？</p><details><summary>答案</summary><ul><li> 遍历数组 </li></ul></details></li><li><p>forEach方法的返回值是？</p><details><summary>答案</summary><ul><li>undefined</li></ul></details></li></ol><h2 id="筛选数组-filter方法" tabindex="-1">筛选数组：filter方法 <a class="header-anchor" href="#筛选数组-filter方法" aria-hidden="true">#</a></h2><h3 id="目标-26" tabindex="-1">目标 <a class="header-anchor" href="#目标-26" aria-hidden="true">#</a></h3><p>能够使用数组的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" target="_blank" rel="noreferrer">filter</a>方法从数组里面筛选出需要的元素</p><h3 id="问题导入-14" tabindex="-1">问题导入 <a class="header-anchor" href="#问题导入-14" aria-hidden="true">#</a></h3><p>问：从 一个数组中 找出 大于20 的元素，将这些元素放入到一个新的数组中？</p><p>之前需要先定义一个空数组，然后遍历数组，依次比较数组里面的元素是否大于20，如果大于将该元素放入到新数组中</p><p>那么有没有更加简单的方法呢？</p><p>现在有更加简单的方法，新增了<code>filter</code>方法，可以更加简单从数组里面筛选出想要的元素</p><h3 id="基本语法-6" tabindex="-1">基本语法 <a class="header-anchor" href="#基本语法-6" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">数组.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">element</span><span style="color:#C9D1D9;">[,</span><span style="color:#FFA657;">index</span><span style="color:#C9D1D9;">]){</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>作用</strong>：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素</p><p><strong>主要使用场景</strong>： 筛选数组符合条件的元素，并返回筛选之后元素的新数组</p><p><strong>参数</strong>：</p><p>callback：针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面二个参数：</p><ul><li><code>element</code> ：当前元素。</li><li><code>index</code> 可选：当前元素的索引。</li></ul><p>当前数组的元素必须写，当前数组的索引号可以不写</p><p><strong>返回值</strong>：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组</p><h3 id="需求-5" tabindex="-1">需求 <a class="header-anchor" href="#需求-5" aria-hidden="true">#</a></h3><p>从 一个数组中 找出 大于20 的元素，将这些元素放入到一个新的数组</p><div class="language-javascript line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">arr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span><span style="color:#79C0FF;">10</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">30</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">40</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">50</span><span style="color:#C9D1D9;">]</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> (</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (a </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> a</span></span>
<span class="line"><span style="color:#C9D1D9;">  }</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (a </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">) { </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> a }</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">  </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span></span>
<span class="line"><span style="color:#C9D1D9;">})</span></span>
<span class="line"><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> a </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">console.</span><span style="color:#D2A8FF;">log</span><span style="color:#C9D1D9;">(newArr)</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">总结</p><ol><li>filter主要是筛选数组</li><li>参数中当前数组元素是必须要写的， 索引号可选。</li></ol></div><h3 id="小结-21" tabindex="-1">小结 <a class="header-anchor" href="#小结-21" aria-hidden="true">#</a></h3><ol><li><p>filter方法的作用？</p><details><summary>答案</summary><ul><li> 筛选数组 </li></ul></details></li><li><p>filter方法的返回值是？</p><details><summary>答案</summary><ul><li>数组</li></ul></details></li></ol><h2 id="商品列表价格筛选需求分析" tabindex="-1">商品列表价格筛选需求分析 <a class="header-anchor" href="#商品列表价格筛选需求分析" aria-hidden="true">#</a></h2><h3 id="目标-27" tabindex="-1">目标 <a class="header-anchor" href="#目标-27" aria-hidden="true">#</a></h3><p>能够分析出商品列表价格筛选的功能需求</p><h3 id="需求-6" tabindex="-1">需求 <a class="header-anchor" href="#需求-6" aria-hidden="true">#</a></h3><ol><li>渲染数据列表</li><li>根据选择不同条件显示不同商品</li></ol><p><img src="/tingweipeng/assets/商品列表价格筛选.e3746d65.gif" alt="" data-fancybox="gallery"></p><h3 id="基本代码结构" tabindex="-1">基本代码结构 <a class="header-anchor" href="#基本代码结构" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;商品渲染&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#7EE787;">*</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">box-sizing</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">border-box</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.list</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">flex-wrap</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">wrap</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">240</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">all</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.5</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item:nth-child</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4n</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rgba</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0.2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translate3d</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">-4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">cursor</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">pointer</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.name</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">18</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">22</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">firebrick</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price::before</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;¥&quot;</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">14</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f5f5f5</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">text-decoration</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">margin-right</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:active</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:focus</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#05943c</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;filter&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;1&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;0-100元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;2&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;100-300元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;300元以上&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;全部区间&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">&lt;!-- &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;name&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;price&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">    &lt;/div&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 2. 初始化数据</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">goodsList</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;4001172&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;称心如意手摇咖啡磨豆机咖啡豆研磨机&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;289.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;4001594&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;日式黑陶功夫茶组双侧把茶具礼盒装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;288.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;4001009&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;竹制干泡茶盘正方形沥水茶台品茶盘&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;109.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;4001874&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;古法温酒汝瓷酒具套装白酒杯莲花温酒器&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;488.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;4001649&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;大师监制龙泉青瓷茶叶罐&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;3997185&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;与众不同的口感汝瓷白酒杯套组1壶4杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;108.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;3997403&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;手工吹制更厚实白酒杯壶套装6壶6杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;99.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        },</span></span>
<span class="line"><span style="color:#C9D1D9;">        {</span></span>
<span class="line"><span style="color:#C9D1D9;">          id: </span><span style="color:#A5D6FF;">&#39;3998274&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          name: </span><span style="color:#A5D6FF;">&#39;德国百年工艺高端水晶玻璃红酒杯2支装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">          picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">      ]</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br></div></div><h2 id="商品列表价格筛选渲染数据" tabindex="-1">商品列表价格筛选渲染数据 <a class="header-anchor" href="#商品列表价格筛选渲染数据" aria-hidden="true">#</a></h2><h3 id="目标-28" tabindex="-1">目标 <a class="header-anchor" href="#目标-28" aria-hidden="true">#</a></h3><p>能够根据对象数组进行页面渲染</p><h3 id="需求-7" tabindex="-1">需求 <a class="header-anchor" href="#需求-7" aria-hidden="true">#</a></h3><p>根据对象数组进行页面渲染</p><h3 id="步骤-2" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-2" aria-hidden="true">#</a></h3><ol><li>封装函数<code>render</code></li><li>使用 <code>map</code>方法遍历数组对数组里面的元素进行映射</li><li>调用函数 传递 参数</li></ol><h3 id="示例代码-9" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-9" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;商品渲染&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">*</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-sizing</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">border-box</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.list</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">flex-wrap</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">wrap</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">240</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">all</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.5</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item:nth-child</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4n</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rgba</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0.2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translate3d</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">-4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">cursor</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">pointer</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.name</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">18</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">22</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">firebrick</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price::before</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;¥&quot;</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">14</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f5f5f5</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-decoration</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-right</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:active</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:focus</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#05943c</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;filter&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;1&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;0-100元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;2&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;100-300元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;300元以上&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;全部区间&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;name&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;price&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">    &lt;/div&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 初始化数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">goodsList</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001172&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;称心如意手摇咖啡磨豆机咖啡豆研磨机&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;289.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001594&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;日式黑陶功夫茶组双侧把茶具礼盒装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;288.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001009&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;竹制干泡茶盘正方形沥水茶台品茶盘&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;109.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001874&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;古法温酒汝瓷酒具套装白酒杯莲花温酒器&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;488.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001649&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;大师监制龙泉青瓷茶叶罐&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3997185&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;与众不同的口感汝瓷白酒杯套组1壶4杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;108.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3997403&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;手工吹制更厚实白酒杯壶套装6壶6杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;99.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3998274&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;德国百年工艺高端水晶玻璃红酒杯2支装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    ]</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求：定义 render 函数 传递 数组 根据数组 进行渲染页面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">arr</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 利用 map 方法 对数组 的元素进行加工处理</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const newArr = arr.map(function(item){})</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(item)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 对对象进行解构赋值</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">price</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">picture</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> item</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;img src=&quot;${</span><span style="color:#C9D1D9;">picture</span><span style="color:#A5D6FF;">}&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;p class=&quot;name&quot;&gt;${</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;p class=&quot;price&quot;&gt;${</span><span style="color:#C9D1D9;">price</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        `</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 将数组元素拼接成字符串 写入到 class=&quot;list&quot; 标签中</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.list&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> newArr.</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(goodsList)</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br></div></div><h2 id="商品列表价格筛选事件注册" tabindex="-1">商品列表价格筛选事件注册 <a class="header-anchor" href="#商品列表价格筛选事件注册" aria-hidden="true">#</a></h2><h3 id="目标-29" tabindex="-1">目标 <a class="header-anchor" href="#目标-29" aria-hidden="true">#</a></h3><p>能够获取到a标签进行事件注册</p><h3 id="需求-8" tabindex="-1">需求 <a class="header-anchor" href="#需求-8" aria-hidden="true">#</a></h3><p>获取 a 标签注册点击事件</p><h3 id="步骤-3" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-3" aria-hidden="true">#</a></h3><ol><li>获取页面上面所有的 a 标签</li><li>循环遍历 注册 <code>click</code>事件</li></ol><h3 id="示例代码-10" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-10" aria-hidden="true">#</a></h3><div class="language-HTML line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;商品渲染&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">*</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-sizing</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">border-box</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.list</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">flex-wrap</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">wrap</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">240</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">all</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.5</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item:nth-child</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4n</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rgba</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0.2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translate3d</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">-4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">cursor</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">pointer</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.name</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">18</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">22</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">firebrick</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price::before</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;¥&quot;</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">14</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f5f5f5</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-decoration</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-right</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:active</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:focus</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#05943c</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;filter&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;1&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;0-100元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;2&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;100-300元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;300元以上&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;全部区间&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;name&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;price&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">    &lt;/div&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 初始化数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">goodsList</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001172&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;称心如意手摇咖啡磨豆机咖啡豆研磨机&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;289.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001594&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;日式黑陶功夫茶组双侧把茶具礼盒装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;288.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001009&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;竹制干泡茶盘正方形沥水茶台品茶盘&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;109.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001874&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;古法温酒汝瓷酒具套装白酒杯莲花温酒器&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;488.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001649&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;大师监制龙泉青瓷茶叶罐&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3997185&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;与众不同的口感汝瓷白酒杯套组1壶4杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;108.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3997403&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;手工吹制更厚实白酒杯壶套装6壶6杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;99.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3998274&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;德国百年工艺高端水晶玻璃红酒杯2支装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    ]</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求：定义 render 函数 传递 数组 根据数组 进行渲染页面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">arr</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 利用 map 方法 对数组 的元素进行加工处理</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const newArr = arr.map(function(item){})</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(item)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 对对象进行解构赋值</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">price</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">picture</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> item</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;img src=&quot;${</span><span style="color:#C9D1D9;">picture</span><span style="color:#A5D6FF;">}&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;p class=&quot;name&quot;&gt;${</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;p class=&quot;price&quot;&gt;${</span><span style="color:#C9D1D9;">price</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        `</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 将数组元素拼接成字符串 写入到 class=&quot;list&quot; 标签中</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.list&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> newArr.</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(goodsList)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 鼠标点击 价格进行 筛选</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 获取所有的 a 标签 注册点击事件 </span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">asDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelectorAll</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.filter a&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// console.log(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 遍历 数组 分别给每一个元素 注册点击事件 </span></span>
<span class="line"><span style="color:#C9D1D9;">    asDom.</span><span style="color:#D2A8FF;">forEach</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      item.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br></div></div><h2 id="商品列表价格筛选根据价格进行筛选数据" tabindex="-1">商品列表价格筛选根据价格进行筛选数据 <a class="header-anchor" href="#商品列表价格筛选根据价格进行筛选数据" aria-hidden="true">#</a></h2><h3 id="目标-30" tabindex="-1">目标 <a class="header-anchor" href="#目标-30" aria-hidden="true">#</a></h3><p>根据选择不同条件显示不同商品</p><h3 id="需求-9" tabindex="-1">需求 <a class="header-anchor" href="#需求-9" aria-hidden="true">#</a></h3><p>点击 a 标签 根据不同的条件显示不同的商品</p><h3 id="步骤-4" tabindex="-1">步骤 <a class="header-anchor" href="#步骤-4" aria-hidden="true">#</a></h3><ol><li>获取被点击的元素的自定义属性值</li><li>创建空数组</li><li>根据不同的自定义属性值使用<code>filter</code>方法进行筛选数据</li><li>调用<code>render</code>函数 传递 数据</li></ol><h3 id="示例代码-11" tabindex="-1">示例代码 <a class="header-anchor" href="#示例代码-11" aria-hidden="true">#</a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><code><span class="line"><span style="color:#C9D1D9;">&lt;!</span><span style="color:#7EE787;">DOCTYPE</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">lang</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;en&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">charset</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;UTF-8&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">http-equiv</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;X-UA-Compatible&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;IE=edge&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">meta</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;viewport&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;width=device-width, initial-scale=1.0&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;商品渲染&lt;/</span><span style="color:#7EE787;">title</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#7EE787;">*</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-sizing</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">border-box</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.list</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">flex-wrap</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">wrap</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">240</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transition</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">all</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.5</span><span style="color:#FF7B72;">s</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item:nth-child</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">4n</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-left</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item:hover</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">box-shadow</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">5</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">rgba</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0.2</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">transform</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">translate3d</span><span style="color:#C9D1D9;">(</span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">-4</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;">);</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">cursor</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">pointer</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">img</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">100</span><span style="color:#FF7B72;">%</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.name</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">18</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-bottom</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">22</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">firebrick</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.item</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">.price::before</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">content</span><span style="color:#C9D1D9;">: </span><span style="color:#A5D6FF;">&quot;¥&quot;</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">font-size</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">14</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">display</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">flex</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">width</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">990</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">auto</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">50</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">30</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">padding</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">10</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#f5f5f5</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#666</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">text-decoration</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">none</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">margin-right</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">20</span><span style="color:#FF7B72;">px</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:active</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#79C0FF;">.filter</span><span style="color:#C9D1D9;"> </span><span style="color:#7EE787;">a</span><span style="color:#79C0FF;">:focus</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">background</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#05943c</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#79C0FF;">color</span><span style="color:#C9D1D9;">: </span><span style="color:#79C0FF;">#fff</span><span style="color:#C9D1D9;">;</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">style</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">head</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;filter&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;1&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;0-100元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;2&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;100-300元&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">data-index</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;3&quot;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;300元以上&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    &lt;</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">href</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;javascript:;&quot;</span><span style="color:#C9D1D9;">&gt;全部区间&lt;/</span><span style="color:#7EE787;">a</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">class</span><span style="color:#C9D1D9;">=</span><span style="color:#A5D6FF;">&quot;list&quot;</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">&lt;!-- &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;name&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">      &lt;p class=&quot;price&quot;&gt;&lt;/p&gt;</span></span>
<span class="line"><span style="color:#8B949E;">    &lt;/div&gt; --&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">div</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 初始化数据</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">goodsList</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> [</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001172&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;称心如意手摇咖啡磨豆机咖啡豆研磨机&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;289.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001594&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;日式黑陶功夫茶组双侧把茶具礼盒装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;288.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001009&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;竹制干泡茶盘正方形沥水茶台品茶盘&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;109.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001874&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;古法温酒汝瓷酒具套装白酒杯莲花温酒器&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;488.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;4001649&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;大师监制龙泉青瓷茶叶罐&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3997185&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;与众不同的口感汝瓷白酒杯套组1壶4杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;108.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3997403&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;手工吹制更厚实白酒杯壶套装6壶6杯&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;99.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      },</span></span>
<span class="line"><span style="color:#C9D1D9;">      {</span></span>
<span class="line"><span style="color:#C9D1D9;">        id: </span><span style="color:#A5D6FF;">&#39;3998274&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        name: </span><span style="color:#A5D6FF;">&#39;德国百年工艺高端水晶玻璃红酒杯2支装&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        price: </span><span style="color:#A5D6FF;">&#39;139.00&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">        picture: </span><span style="color:#A5D6FF;">&#39;https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg&#39;</span><span style="color:#C9D1D9;">,</span></span>
<span class="line"><span style="color:#C9D1D9;">      }</span></span>
<span class="line"><span style="color:#C9D1D9;">    ]</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 需求：定义 render 函数 传递 数组 根据数组 进行渲染页面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">arr</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 利用 map 方法 对数组 的元素进行加工处理</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// const newArr = arr.map(function(item){})</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">newArr</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> arr.</span><span style="color:#D2A8FF;">map</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(item)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 对对象进行解构赋值</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> { </span><span style="color:#79C0FF;">name</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">price</span><span style="color:#C9D1D9;">, </span><span style="color:#79C0FF;">picture</span><span style="color:#C9D1D9;"> } </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> item</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">return</span><span style="color:#C9D1D9;"> </span><span style="color:#A5D6FF;">`</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;div class=&quot;item&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;img src=&quot;${</span><span style="color:#C9D1D9;">picture</span><span style="color:#A5D6FF;">}&quot; alt=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;p class=&quot;name&quot;&gt;${</span><span style="color:#C9D1D9;">name</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">            &lt;p class=&quot;price&quot;&gt;${</span><span style="color:#C9D1D9;">price</span><span style="color:#A5D6FF;">}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">          &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A5D6FF;">        `</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">      </span><span style="color:#8B949E;">// 将数组元素拼接成字符串 写入到 class=&quot;list&quot; 标签中</span></span>
<span class="line"><span style="color:#C9D1D9;">      document.</span><span style="color:#D2A8FF;">querySelector</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.list&#39;</span><span style="color:#C9D1D9;">).innerHTML </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> newArr.</span><span style="color:#D2A8FF;">join</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(goodsList)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 鼠标点击 价格进行 筛选</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 1. 获取所有的 a 标签 注册点击事件 </span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">asDom</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> document.</span><span style="color:#D2A8FF;">querySelectorAll</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;.filter a&#39;</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// console.log(a)</span></span>
<span class="line"><span style="color:#C9D1D9;">    </span><span style="color:#8B949E;">// 2. 遍历 数组 分别给每一个元素 注册点击事件 </span></span>
<span class="line"><span style="color:#C9D1D9;">    asDom.</span><span style="color:#D2A8FF;">forEach</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">item</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">      item.</span><span style="color:#D2A8FF;">addEventListener</span><span style="color:#C9D1D9;">(</span><span style="color:#A5D6FF;">&#39;click&#39;</span><span style="color:#C9D1D9;">, </span><span style="color:#FF7B72;">function</span><span style="color:#C9D1D9;"> () {</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 3. 点击a时 获取到 被点击的 自定义属性值  dom对象.dataset.xxx</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">const</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">index</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">+</span><span style="color:#79C0FF;">this</span><span style="color:#C9D1D9;">.dataset.index</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(typeof index)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 4. 根据自定义属性值 来判断 点击是谁</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">let</span><span style="color:#C9D1D9;"> arr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> []</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (index </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">1</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#8B949E;">// 0~100元</span></span>
<span class="line"><span style="color:#C9D1D9;">          arr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> goodsList.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">val</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> val.price </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">0</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">&amp;&amp;</span><span style="color:#C9D1D9;"> val.price </span><span style="color:#FF7B72;">&lt;=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">100</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        } </span><span style="color:#FF7B72;">else</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (index </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">2</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#8B949E;">// 100~300</span></span>
<span class="line"><span style="color:#C9D1D9;">          arr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> goodsList.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">val</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> val.price </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">100</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">&amp;&amp;</span><span style="color:#C9D1D9;"> val.price </span><span style="color:#FF7B72;">&lt;=</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">300</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        } </span><span style="color:#FF7B72;">else</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">if</span><span style="color:#C9D1D9;"> (index </span><span style="color:#FF7B72;">===</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">3</span><span style="color:#C9D1D9;">) {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#8B949E;">// 300元以上</span></span>
<span class="line"><span style="color:#C9D1D9;">          arr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> goodsList.</span><span style="color:#D2A8FF;">filter</span><span style="color:#C9D1D9;">(</span><span style="color:#FFA657;">val</span><span style="color:#C9D1D9;"> </span><span style="color:#FF7B72;">=&gt;</span><span style="color:#C9D1D9;"> val.price </span><span style="color:#FF7B72;">&gt;</span><span style="color:#C9D1D9;"> </span><span style="color:#79C0FF;">300</span><span style="color:#C9D1D9;">)</span></span>
<span class="line"><span style="color:#C9D1D9;">        } </span><span style="color:#FF7B72;">else</span><span style="color:#C9D1D9;"> {</span></span>
<span class="line"><span style="color:#C9D1D9;">          </span><span style="color:#8B949E;">// 所有的数据</span></span>
<span class="line"><span style="color:#C9D1D9;">          arr </span><span style="color:#FF7B72;">=</span><span style="color:#C9D1D9;"> goodsList</span></span>
<span class="line"><span style="color:#C9D1D9;">        }</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// console.log(arr)</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#8B949E;">// 5. 根据 arr 去渲染页面</span></span>
<span class="line"><span style="color:#C9D1D9;">        </span><span style="color:#D2A8FF;">render</span><span style="color:#C9D1D9;">(arr)</span></span>
<span class="line"><span style="color:#C9D1D9;">      })</span></span>
<span class="line"><span style="color:#C9D1D9;">    })</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">  &lt;/</span><span style="color:#7EE787;">script</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">body</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C9D1D9;">&lt;/</span><span style="color:#7EE787;">html</span><span style="color:#C9D1D9;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br></div></div><h2 id="作业" tabindex="-1">作业 <a class="header-anchor" href="#作业" aria-hidden="true">#</a></h2><ol><li>整理今天笔记， Xmind或者md笔记都可以</li><li>综合案例至少写三遍</li><li>重点练习 箭头函数、对象解构</li><li>常见面试题：垃圾回收机制、闭包</li><li>开始做测试题 问卷星：<a href="https://ks.wjx.top/vm/rpCvBYP.aspx" target="_blank" rel="noreferrer">https://ks.wjx.top/vm/rpCvBYP.aspx</a></li><li>预习第二天的内容</li></ol><h2 id="参考文献" tabindex="-1">参考文献 <a class="header-anchor" href="#参考文献" aria-hidden="true">#</a></h2><ul><li>阮一峰es6电子书 -&gt; <a href="https://es6.ruanyifeng.com/" target="_blank" rel="noreferrer">es6</a></li><li>垃圾回收机制参考博客 -&gt; <a href="https://juejin.cn/post/6844903556265279502#heading-7" target="_blank" rel="noreferrer">垃圾回收机制</a></li><li>多级对象解构 -&gt; <a href="https://v2.cn.vuejs.org/v2/guide/components-slots.html#%E8%A7%A3%E6%9E%84%E6%8F%92%E6%A7%BD-Prop" target="_blank" rel="noreferrer">多级对象解构在Vue中使用</a></li></ul></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-cfb513e0 data-v-21f75714><!----><div class="prev-next" data-v-21f75714><div class="pager" data-v-21f75714><!----></div><div class="pager" data-v-21f75714><a class="pager-link next" href="/tingweipeng/js%E8%BF%9B%E9%98%B6/day02.html" data-v-21f75714><span class="desc" data-v-21f75714>Next page</span><span class="title" data-v-21f75714>02-es6语法</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"ajax_day02.md\":\"e35eca52\",\"ajax_day03.md\":\"585e2c65\",\"ajax_day04.md\":\"0ca703d2\",\"ajax_index.md\":\"2b437449\",\"index.md\":\"ff5d4089\",\"js进阶_day02.md\":\"24ed742a\",\"js进阶_day03.md\":\"f0d3d414\",\"js进阶_day04.md\":\"d30bb382\",\"js进阶_index.md\":\"c6d77850\",\"vue基础_day02.md\":\"5f8c856e\",\"vue基础_day03.md\":\"7cd8d83f\",\"vue基础_index.md\":\"05339e1f\",\"webapis_day02.md\":\"0ca07905\",\"webapis_day03.md\":\"80c6b805\",\"webapis_day04.md\":\"6159ddb6\",\"webapis_day05.md\":\"fdfba8b3\",\"webapis_day06.md\":\"aaece170\",\"webapis_index.md\":\"8bdb89a3\"}")</script>
    <script type="module" async src="/tingweipeng/assets/app.bfa3a24a.js"></script>
    
  </body>
</html>